<!-- 对 图片集 组件的编辑 -->
<template>
  <div class="images-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-form :label-width="formLabelWidth">
              <el-form-item label="宽度" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                <el-input @blur="widthBlur" size="mini" style="width:80px;"
                  v-model="data.config.width" maxlength="12" placeholder=""></el-input>
                <span class="tip-color1">例如：30% </span>
              </el-form-item>
              <el-form-item label="高度" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                <el-input @blur="heightBlur" size="mini" style="width:80px;"
                  v-model="data.config.height" maxlength="12" placeholder=""></el-input>
                <span class="tip-color1">例如：50% </span>
              </el-form-item>
              <el-form-item label="灯箱效果" style="margin-bottom:0px;">
                <el-select style="width:160px;" size="mini" v-model="data.config.lightbox" placeholder="请选择">
                  <el-option label="无灯箱" :value="0"></el-option>
                  <el-option label="单图灯箱" :value="1"></el-option>
                </el-select>
                <span class="tip-color1">若灯箱开启，链接无效！</span>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="图片列表" name="2">
            <div class="imgList-u">
              <draggable v-model="data.imageList" class="imaged-placeholder" v-bind="{draggable:'.img-item-draggable'}"
                @end="datadragEnd">
                <div class="img-item img-item-draggable" v-for="(item, index) in data.imageList" :key="index">
                  <div class="image">
                    <el-image :fit="'scale-down'" :src="item.src"></el-image>
                  </div>
                  <div class="demonstration"><i @click.stop="editorLink(index)" class="el-icon-link"></i><i
                      @click.stop="editorAttr(index)" class="el-icon-edit"></i><i @click.stop="deleteImage(index)"
                      class="el-icon-delete"></i></div>
                </div>
                <div class="img-item" @click.stop="addImage" slot="header">
                  <div class="image" style="cursor:pointer;">
                    <el-image :src="ImagesPopAdd"></el-image>
                  </div>
                </div>
              </draggable>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>

    <ChooseRepertory ref="chooseImage" />
    <WDialogLink ref="wDialogLink" />
    <WDialogImageAttr ref="wDialogImageAttr" />
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import WDialogLink from '@/components/common/design/dialog/widgets/WDialogLink.vue'
import WDialogImageAttr from '@/components/common/design/dialog/widgets/WDialogImageAttr.vue'

import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
// import ImagesEmpty from '@/assets/images/image-empty.png'
import ImagesPopAdd from '@/assets/images/pop_add.png'
import PaddingTop from '@/components/common/design/dialog/component/formitem/PaddingTop.vue'
import PaddingBottom from '@/components/common/design/dialog/component/formitem/PaddingBottom.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import * as functions from '@/core/functions.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
// import Global from '@/config/global.js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ]),
    imageListLength () {
      return '图片数量：' + this.data.imageList.length
    }
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTRING3D, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data
      this.repertoryData = bjComponent._other.imageList

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      activeName: '1',
      formLabelWidth: '120px',
      name: '相册画廊',
      bjComponent: null,
      data: null,
      repertoryData: [],
      // 是否第一次进来
      init: true,
      // import 引入
      ImagesPopAdd: ImagesPopAdd,
      // 图片列表的总数
      total: 20
    }
  },
  methods: {
    widthBlur () {
      let value = this.data.config.width
      if (value === '' || isNaN(parseInt(value))) {
        this.data.config.width = ''
      } else {
        if (/\d+%$/.test(value)) {
          this.data.config.width = value
        } else {
          this.data.config.width = parseInt(value) + 'px'
        }
      }
    },
    heightBlur () {
      let value = this.data.config.height
      if (value === '' || isNaN(parseInt(value))) {
        this.data.config.height = ''
      } else {
        if (/\d+%$/.test(value)) {
          this.data.config.height = value
        } else {
          this.data.config.height = parseInt(value) + 'px'
        }
      }
    },
    deleteImage (index) {
      let item = this.data.imageList[index]
      if (!item) {
        return
      }
      let repertory = this.repertoryData[index]
      if (!repertory) {
        return
      }

      this.data.imageList.splice(index, 1)
      this.repertoryData.splice(index, 1)
    },
    // 拖拉排序
    datadragEnd (event) {
      let item = this.repertoryData[event.oldIndex - 1]
      this.repertoryData.splice(event.oldIndex - 1, 1)
      this.repertoryData.splice(event.newIndex - 1, 0, item)
    },
    // 编辑图片属性
    editorAttr (index) {
      let item = this.data.imageList[index]
      if (!item) {
        return
      }
      let repertory = this.repertoryData[index]
      if (!repertory) {
        return
      }

      this.$refs['wDialogImageAttr'].open({ alt: item.alt, title: item.title, caption: item.caption }, (image) => {
        this.data.imageList[index].alt = image.alt
        this.data.imageList[index].title = image.title
        this.data.imageList[index].caption = image.caption
      })
    },
    // 编辑图片的链接
    editorLink (index) {
      let item = this.data.imageList[index]
      if (!item) {
        return
      }
      let repertory = this.repertoryData[index]
      if (!repertory) {
        return
      }

      this.$refs['wDialogLink'].open(item.imglink, (link) => {
        this.data.imageList[index].imglink = link
      })
    },
    // 添加图片
    addImage () {
      if (this.data.imageList.length >= this.total) {
        this.$message.error('图片列表总数不能超过' + this.total + '张！')
        return
      }
      this.$refs['chooseImage'].show({ title: '选择图片', max: this.total - this.data.imageList.length, where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          // let maxOrderNum = 0
          // if (this.repertoryData && this.repertoryData.length > 0) {
          //   this.repertoryData.forEach(element => {
          //     if (element.orderNum > maxOrderNum) {
          //       maxOrderNum = element.orderNum
          //     }
          //   })
          // }

          repertoryList.forEach(item => {
            let src = functions.getRepertoryImageSrcByHostRepertory(item)

            // let repertoryData = {
            //   id: -1,
            //   parentId: 0,
            //   type: 11,
            //   orderNum: ++maxOrderNum,
            //   config: {
            //     title: '',
            //     alt: '',
            //     caption: '',
            //     imglink: {
            //       href: '',
            //       target: ''
            //     }
            //   },
            //   repertory: item,
            //   child: null
            // }
            this.data.imageList.push({
              src: src,
              title: '',
              alt: '',
              caption: '',
              imglink: {
                href: '',
                target: ''
              }
            })
            let imghrepertory = {}
            imghrepertory.hrepertory = item
            this.repertoryData.push(imghrepertory)
          })
        }
      })
    },
    titleCase (str) {
      return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
    },
    // ......
    close () {
      this.dialogShow = false
      this.component = null
      this.data = null
      this.repertoryData = []
      this.activeName = '1'
      this.init = true
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      this.bjComponent._other.imageList = _.cloneDeep(this.repertoryData)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    PaddingTop,
    PaddingBottom,
    ChooseRepertory,
    WDialogLink,
    WDialogImageAttr,
    draggable
  }
}
</script>
<style scoped>
.images-edit .image-slot {
  color: #656565;
  display: flex;
  justify-content: center;
  align-items: center;
}
.edit-container-u {
  width: 840px;
  min-height:calc(100vh - 200px);
}
.imgList-u {
  height:calc(100vh - 260px);
  overflow-y: auto;
}
.theme-uu /deep/ .el-input__suffix {
  display:none;
}
</style>
